<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <style type="text/css">
        .content {
            padding: 20px;
        }

        .item {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            display: flex;
            flex-wrap: wrap;
            background-color: #fff;
            border-radius: 8px;
        }

        .van-field {
            width: 50%;
        }

        .van-field:nth-child(1) {
            width: 100%;
        }

        .van-field__label {
            margin-right: 8px;
            width: auto;
        }

        .number {
            text-align: center;
            margin-right: 8px;
            width: 2em;
            height: 2em;
            background-color: #1989fa;
            border-radius: 50%;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .value {
            text-align: left;
            color: #4A4A4A;
            font-weight: 500;
            font-size: 18px;
        }

        #safeTop .van-button__content .van-button__icon {
            color: #323233;
        }

        .van-popup {
            display: flex;
            flex-direction: column;
            padding: 20px;
        }

        .van-popup .van-button {
            margin: auto;
            width: 80%;
        }

        .van-button--small,
        .van-button--default {
            margin-left: 10px;
        }

        .nav-barRight {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 8px;
            display: flex;
            align-items: center;
            /* margin: auto 8px auto auto; */

        }

        .nav-barRight .van-button {
            margin: 0 10px;
        }

        .Addbutton {
            padding: 0 20px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box" id="box">
            <div class="van-nav-bar" id="safeTop">
                <div class="van-nav-bar__content">
                    <div class="van-nav-bar__left" @click="onClickLeft">
                        <i class="van-icon van-icon-arrow-left van-nav-bar__arrow"></i>
                    </div>
                    <div class="van-nav-bar__title van-ellipsis">
                        {{name + '列表'}}
                    </div>
                    <div class="nav-barRight">
                        <van-button size="small" type="default" icon="search" @click="searchShow = true">搜索</van-button>
                        <van-button size="small" type="default" icon="plus" @click='Addplus'></van-button>
                    </div>

                </div>
            </div>
            <div class="content">
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <div class="item" v-for="(item, index) in tableData" @click="intoItem(item)">
                        <div class="van-cell van-field" style="display: flex;align-items: center;">
                            <div class="van-cell__title van-field__label number">
                                <span>{{index + 1}}</span>
                            </div>
                            <van-field v-model="item.CreateTime" label="操作日期：" readonly></van-field>

                        </div>

                    </div>
                </van-list>
            </div>
            <audio id="audioPlayer" preload="auto">
                <source src="../image/aigei_com.mp3" type="audio/mpeg">
            </audio>
            <div class="indexBottom">
                汇智云创 技术支持
            </div>
        </div>
        <van-popup v-model="searchShow" position="bottom">
            <van-field v-model="filterData.FBDate" label="开始时间：" placeholder="请选择开始时间" readonly
                @click="handlerDate('开始时间')"></van-field>
            <van-field v-model="filterData.FEDate" label="结束时间：" placeholder="请选择结束时间" readonly
                @click="handlerDate('结束时间')"></van-field>
            <van-button size="small " type="info" @click="handlerSearch">确认</van-button>
        </van-popup>

        <van-popup v-model="dateShow" position="bottom">
            <van-datetime-picker v-model="currentDate" type="date" title="选择操作日期" @confirm="confirmDate"
                @cancel="dateShow = false"></van-datetime-picker>
        </van-popup>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        var FNScanner = api.require('FNScanner');
        var scanTC27 = api.require('scanTC27');


        api.addEventListener({
            name: 'refreshWatertemperatureList'
        }, function (ret) {
            api.setScreenOrientation({
                orientation: 'landscape_left'
            });
            vm.filterData.PageIndex = 1
            vm.tableData = []
            vm.getDataList()
        })

        vm = new Vue({
            el: '#app',
            data: {
                name: api.pageParam.name,
                tableData: [],
                loading: false,
                finished: false,
                filterData: {
                    PageIndex: 1,
                    PageSize: 20,
                    FBDate: APP.getFormatbeforDate(),
                    FEDate: APP.getFormatDate(new Date()).split(' ')[0],
                },
                searchShow: false,
                currentDateVal: '',
                dateShow: false,
                currentDate: new Date(),
            },
            created: function () {
                var that = this;
                that.getDataList()
                window.localStorage.setItem('pageName', JSON.stringify(that.name))
            },
            mounted() {
                APP.setSafeTop()
                APP.setPage()
            },
            methods: {
                Addplus() {
                    var that = this
                    api.openWin({
                        name: 'WorkshopScanDetail',
                        url: 'WorkshopScanDetail.html',
                        pageParam: {
                            name: that.name
                        }
                    })
                },

                onClickLeft() {
                    var that = this
                    api.closeWin()
                    api.sendEvent({
                        name: 'refreshIndexList'
                    })
                    api.sendEvent({
                        name: 'auto_landscape_index'
                    })
                },
                onLoad() {
                    var that = this
                    console.log(JSON.stringify(that.filterData));
                    that.filterData.PageIndex++
                    that.getDataList()
                },
                getDataList() {
                    var that = this
                    that.loading = true
                    var obj = that.filterData
                    console.log('obj', JSON.stringify(that.filterData))
                    APP.ajax('getEightList', obj, function (res) {
                        console.log('res', JSON.stringify(res))
                        res.ds.map((item) => {
                            item.CreateTime = item.CreateTime ? item.CreateTime.replace('T', ' ') : ''
                        })
                        that.tableData = that.tableData.concat(res.ds)
                        that.searchShow = false
                        that.loading = false
                        if (res.ds.length < that.filterData.PageSize) {
                            that.finished = true
                        }
                    })
                },
                handlerDate(str) {
                    var that = this
                    that.dateShow = true
                    that.currentDateVal = str
                },
                confirmDate() {
                    var that = this
                    if (that.currentDateVal == '开始时间') {
                        that.filterData.FBDate = APP.getFormatDate(that.currentDate).split(' ')[0]

                    } else {
                        that.filterData.FEDate = APP.getFormatDate(that.currentDate).split(' ')[0]
                    }
                    that.dateShow = false
                },
                handlerSearch() {
                    var that = this
                    that.tableData = []
                    that.finished = false
                    that.filterData.PageIndex = 1
                    that.getDataList()
                },
                intoItem(row) {
                    var that = this
                    console.log(JSON.stringify(row));
                    api.openWin({
                        name: 'WorkshopScanDetail',
                        url: 'WorkshopScanDetail.html',
                        pageParam: {
                            name: that.name,
                            EightID: row.EightID
                        }
                    })
                }
            }
        })
    };
</script>

</html>